<template>
  <!-- 弹窗组件 -->
  <el-dialog
    :visible.sync="dialogFormVisible"
    :title="title"
    :before-close="handleClose"
    :close-on-click-modal="false"
    width="450px">
    <el-form
      ref="ruleForm"
      :model="form"
      :rules="rules"
      label-width="120px"
    >
      <el-form-item :label="$t('toolingModel')" prop="toolingModel">
        <el-input
          :disabled="form.id ? true: false"
          v-model="form.toolingModel"
          :placeholder="`${$t('pleaseInput')}${$t('toolingModel')}`"
          style="width: 100%"/>
      </el-form-item>
      <el-form-item :label="$t('toolingType')" prop="toolingType" >
        <el-select
          v-model="form.toolingType"
          :placeholder="`${$t('pleaseSelect')}${$t('toolingType')}`"
          style="width: 100%">
          <el-option
            v-for="item in toolingTypeList"
            :key="item.id"
            :value="item.name"
            :label="item.name"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button icon="el-icon-circle-close" @click="handleClose">{{
        $t("cancel")
      }}</el-button>
      <el-button v-btnThrottle="doSave" type="primary" icon="el-icon-receiving">{{ $t('save') }}</el-button>
    </div>
  </el-dialog>
</template>
<script>
import crudJob from '@/api/Tooling/toolingModel'
export default {
  name: 'ToolingModel',
  data() {
    return {
      dialogFormVisible: false,
      title: '',
      toolingTypeList: [],
      form: {},
      rules: {
        toolingType: [
          { required: true, message: this.$t('searchtoolingType'), trigger: 'blur' }
        ],
        toolingModel: [
          { required: true, message: this.$t('searchtoolingModel'), trigger: 'change' }
        ]
      } // 表单校验规则

    }
  },
  methods: {
    // 新增数据
    doSave() {
      this.$refs['ruleForm'].validate((valid) => {
        if (!valid) {
          return false
        }
        if (this.form.id) {
          // 存在id则是更新
          crudJob.edit({ id: this.form.id, ...this.form }).then(res => {
            this.$betterTips(res, this.handleUpdate, this.handleClose)
          })
        } else {
          // 不存在id则是新增
          crudJob.add(this.form).then(res => {
            this.$betterTips(res, this.handleUpdate, this.handleClose)
          })
        }
      })
    },
    // 打开弹窗
    handleOpen(row) {
      if (row && row.id) {
        this.title = this.$t('modify')
        crudJob.get({ id: row.id }).then((res) => {
          this.form = res.data
        })
      } else {
        this.title = this.$t('add')
      }
      crudJob.GetToolingTypeList()
        .then((res) => {
          this.toolingTypeList = res.data
        })
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['ruleForm'].clearValidate()
      })
    },
    // 关闭弹窗
    handleClose() {
      Object.assign(this.$data, this.$options.data.call(this))
    },
    handleUpdate() {
      this.$emit('initList')
    }
  }
}
</script>
